<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, ref, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { selectionType } from '@/api/login/types'
import { GetDoneCoursePlansApi, AddCourseEvaluationApi, GetDoneCourseExamsApi } from '@/api/course'
import { getUserListApi } from '@/api/department'
import { useI18n } from 'vue-i18n'
import { ElSpace, ElButton, ElMessage } from 'element-plus'
const { t } = useI18n()
const { required } = useValidator()
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
console.log('-------', route.query)
const { push } = useRouter()

const typeList = ref<selectionType[]>([])
let type = route.query.type
const GetCourseTypes = async () => {
  const res = type == 'plan' ? await GetDoneCoursePlansApi() : await GetDoneCourseExamsApi()
  res.data?.map((item) => {
    typeList.value.push({
      label: item.courseName + (item.remark ? '~' + item.remark : ''),
      value: item.guid
    })
  })
}
GetCourseTypes()

const formSchema = ref<FormSchema[]>([
  {
    field: 'courseGuid',
    label: type == 'plan' ? '课程名称' : '考试名称',
    component: 'Select',
    componentProps: {
      clearable: true,
      placeholder: '请选择课程名称'
    },
    optionApi: () => {
      return typeList.value
    }
  },
  {
    field: 'courseAddress',
    label: type == 'plan' ? '培训地点' : '考试地点',
    component: 'Input'
  },
  {
    field: 'evaluationContent',
    label: '评价内容',
    component: 'Input',
    componentProps: {
      type: 'textarea',
      rows: 5
    }
  },
  //   {
  //     field: 'evaluationScore',
  //     label: '评价得分',
  //     component: 'InputNumber',
  //     componentProps: {
  //       min: 0,
  //       max: 100
  //     }
  //   },
  {
    field: 'remark',
    label: t('common.remark'),
    component: 'Input',
    componentProps: {
      type: 'textarea',
      rows: 5
    }
  }
])
const rules = reactive({
  courseGuid: [required()],
  evaluationContent: [required()]
})

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

const signaturePad = ref()
const saveLoading = ref(false)
const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    const { isEmpty, data } = signaturePad.value.saveSignature()
    if (isEmpty) {
      ElMessage.error('请留下您的签名')
      return
    } else {
      // console.log('picture url：', data)
      formData.userSign = data
    }
    saveLoading.value = true
    try {
      console.log('formData---', formData)
      let index = typeList.value.findIndex((item) => item.value == formData.courseGuid)

      formData.courseName = typeList.value[index].label
      console.log('formData---', formData)
      const res = await AddCourseEvaluationApi(formData)
      ElMessage.success('保存成功')

      push({
        path: type == 'plan' ? '/courseplan/planevaluate' : '/examination/evaluate',
        query: { t: Date.now() }
      })
      // window.location.reload()
    } catch (error) {
      console.log(error)
    } finally {
      saveLoading.value = false
    }
  }
}

const signOptions = ref({
  penColor: '#000000',
  minWidth: 2,
  maxWidth: 2
})

// 撤销电子签名
const unDoSign = () => {
  signaturePad.value.undoSignature()
}

// 清空电子签名
const clearSign = () => {
  signaturePad.value.clearSignature()
}

// // 保存并上传电子签名
// const saveUploadSign = async () => {}
</script>

<template>
  <ContentWrap title="新增评价">
    <Form :rules="rules" @register="formRegister" :schema="formSchema" />
    <div class="flex mt-4">
      <span style="margin-right: 15px">手写签名区:</span>
      <VueSignaturePad
        class="line"
        ref="signaturePad"
        :options="signOptions"
        width="800px"
        height="400px"
      />
    </div>
    <el-space class="mt10">
      <el-button @click="unDoSign" type="warning">撤销</el-button>
      <el-button @click="clearSign" type="success">清屏</el-button>
      <el-button @click="submit" type="primary" :loading="saveLoading">保存</el-button>
      <el-button @click="$router.go(-1)" type="info">返回</el-button>
    </el-space>
  </ContentWrap>
</template>
<style scoped>
.line {
  border: 1px solid #dcdfe6;
}
.mt10 {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
